var myChartBarCircle = echarts.init(document.getElementById('main-circle')); 
var labelTop = {
    normal : {
        label : {
            show : true,
            position : 'center',
            formatter : '{b}',
            textStyle: {
                baseline : 'bottom',
                color: '#cbcbcb'
            }
        },
        labelLine : {
            show : false
        }
    }
};
var labelFromatter = {
    normal : {
        color: 'rgba(0,0,0,1)',
        label : {
            formatter : function (params){
                return 100 - params.value + '%'
            },            
            textStyle: {
                baseline : 'top',
                // color: 'rgba(0,0,0,1)',
            }
        }
    },
}
var labelBottom = {
    normal : {
        color: '#ccc',
        label : {
            show : true,
            position : 'center',
            textStyle : {
                baseline : 'top',
                fontWeight : 300 ,
                fontSize : 20
            }
        },
        labelLine : {
            show : false
        }
    },
    emphasis: {
        color: 'rgba(0,0,0,0)'
    }
};
var radius = [40, 50];   
optionBarCircle = {
    // legend: {
    //     x : 'center',
    //     y : 'center',
    //     data:[
    //         'GoogleMaps','Facebook','Youtube','Google+','Weixin',
    //         'Twitter', 'Skype', 'Messenger', 'Whatsapp', 'Instagram'
    //     ]
    // },
    // title : {
    //     text: 'The App World',
    //     subtext: 'from global web index',
    //     x: 'center'
    // },
    // toolbox: {
    //     show : true,
    //     feature : {
    //         dataView : {show: true, readOnly: false},
    //         magicType : {
    //             show: true, 
    //             type: ['pie', 'funnel'],
    //             option: {
    //                 funnel: {
    //                     width: '30%',
    //                     height: '30%',
    //                     itemStyle : {
    //                         normal : {
    //                             label : {
    //                                 formatter : function (params){
    //                                     return 'other\n' + params.value + '%\n'
    //                                 },
    //                                 textStyle : {
    //                                     baseline : 'top',
    //                                     color: 'rgba(0,0,0,1)'
    //                                 }
    //                             }
    //                         },
    //                     } 
    //                 }
    //             }
    //         },
    //         restore : {show: true},
    //         saveAsImage : {show: true}
    //     }
    // },
    series : [
        {
            type : 'pie',
            center : ['20%', '30%'],
            radius : radius,
            x: '0%', // for funnel
            itemStyle :{
                normal : {
                    color: '#ff774f',
                    label : {
                        formatter : function (params){
                            return 100 - params.value + '%'
                        },            
                        textStyle: {
                            baseline : 'top',
                            color: '#373c42',
                        }
                    }
                }
            },
            data : [
                {name:'11', value:30, itemStyle : labelBottom},
                {name:'王五', value:70,itemStyle : labelTop}
            ]
        },
        {
            type : 'pie',
            center : ['50%', '30%'],
            radius : radius,
            x:'20%', // for funnel
            itemStyle :{
                normal : {
                    color: '#01c794',
                    label : {
                        formatter : function (params){
                            return 100 - params.value + '%'
                        },            
                        textStyle: {
                            baseline : 'top',
                            color: '#373c42',
                        }
                    }
                }
            },
            data : [
                {name:'other', value:56, itemStyle : labelBottom},
                {name:'张三', value:44,itemStyle : labelTop}
            ]
        },
        {
            type : 'pie',
            center : ['80%', '30%'],
            radius : radius,
            x:'40%', // for funnel
            itemStyle :{
                normal : {
                    color: '#df69bd',
                    label : {
                        formatter : function (params){
                            return 100 - params.value + '%'
                        },            
                        textStyle: {
                            baseline : 'top',
                            color: '#373c42',
                        }
                    }
                }
            },
            data : [
                {name:'other', value:65, itemStyle : labelBottom},
                {name:'李四', value:35,itemStyle : labelTop}
            ]
        }
    ]
};
                    
                    
 
myChartBarCircle.setOption(optionBarCircle, true); //显示国家地图





